<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
  <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
    <link rel="stylesheet" type="text/css" href="https://viebel.github.io/klipse/examples/main.css">
</head>
<body class="container">
<h1> Google Closure Compiler Advanced Compilation - Live Demo</h1>
<p>
Google Closure Compiler has been <a href="https://github.com/google/closure-compiler-js">ported to javascript</a>.<br>
    As a consequence, it is now possible to advanced compile javascript code in the browser!
</p>
<p>
The code snippets are live and interactive, powered by <a href="https://github.com/viebel/klipse">the KLIPSE plugin</a>:
    <ul>
    <li>1. Live: The code is evaluated in the browser</li>
    <li>2. Interactive: Edit the code and press <code>Ctrl-Enter</code> to evaluate (or wait for 5 seconds).
    </ul>

    </p>

    <p>
    The page may freeze for a couple of seconds, while the compiler is doing is job...

    </p>
    <h2> An example from Google blog</h2>
    <p>This example is take from <a href="https://developers.google.com/closure/compiler/docs/api-tutorial3">https://developers.google.com/closure/compiler/docs/api-tutorial3</a>.</p>

    <pre><code class="compile_js">
        function unusedFunction(note) {
        alert(note['text']);
        }

        function displayNoteTitle(note) {
        alert(note['title']);
        }

        var flowerNote = {};
        flowerNote['title'] = "Flowers";
        displayNoteTitle(flowerNote);
        </code></pre>

        <h2>An example that shows how smart is the compiler</h2>
        <pre><code class="compile_js">
            function foo(x) {
            if(x > 19) {
            return x * 100;
            }
            return x * 10000;
            }

            console.log([foo(2), foo(111), foo(window.y)]);
            </code></pre>
            <script>
            window.klipse_settings = {
            codemirror_options_in: {
            lineWrapping: true,
            lineNumbers: true,
            autoCloseBrackets: true
            },
            codemirror_options_out: {
            lineWrapping: true
            },
            selector_compile_js: '.compile_js'
            };
            </script>
            <script src="https://viebel.github.io/klipse/repo/js/closure_compiler/jscomp.js"></script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
            </body>
            </html>
